import { defineComponent, reactive, ref } from 'vue'
import { ElCard, ElSpace, ElLink, ElDivider } from 'element-plus'
import { Plus, Minus } from '@element-plus/icons-vue'
import styles from './index.module.scss'
import HomeMap from './HomeMap'
import HomeTree from './HomeTree'
import StatusAccounting from './StatusAccounting'
import DeviceList from './DeviceList'
import DeviceFaultList from './DeviceFaultList'
import DeviceInfo from './DeviceInfo'

export default defineComponent(function ManholeRunmap() {
  const homeMapRef = ref()
  const state = reactive<any>({
    mapZoom: 5,
    infoVisible: false,
    deviceStatus: 0,
    deviceShow: false,
    deviceId: '',
    faultListShow: false
  })
  //  树节点点击显示详情
  const handleNodeClick = (row: any) => {
    state.infoVisible = false
    if (row.parentId === '1') {
      state.deviceId = row.id
      setTimeout(() => {
        state.infoVisible = true
      }, 600)
    }
  }
  //  地图点击显示详情
  const handleMonitorInfo = (id?: string) => {
    state.infoVisible = false
    state.deviceId = id
    setTimeout(() => {
      state.infoVisible = true
    }, 600)
  }
  //  地图标点
  const onMarkerLayer = (value: any) => {
    const markers = [value.lon, value.lat]
    const content = value.name
    homeMapRef.value.markerLayer({ markers, content })
  }
  // 控制地图放大缩小
  const handleClickChangeMapZoom = async (type: '+' | '-') => {
    if (type === '+') {
      state.mapZoom++
    } else {
      state.mapZoom--
    }
    await homeMapRef.value.map.setZoom(state.mapZoom)
  }
  // 获取当前地图层级并赋值
  const getMapZoom = () => {
    state.mapZoom = Math.round(homeMapRef.value.map.getZoom())
  }
  //  查看设备列表
  const onDeviceNum = (value: number) => {
    state.deviceStatus = value
    state.deviceShow = true
  }
  //  设备列表显示隐藏
  const onDeviceCancel = () => {
    state.deviceShow = !state.deviceShow
  }
  //  设备故障列表
  const onRunStatusValue = (value: string) => {
    state.deviceId = value
    state.faultListShow = true
  }
  //  设备故障列表显示隐藏
  const onDeviceFaultCancel = () => {
    state.faultListShow = !state.faultListShow
  }
  return () => (
    <section class={styles['home-box']}>
      {/* 井盖设备状态统计 */}

      <HomeMap
        id={styles['home-map']}
        ref={homeMapRef}
        getMapZoom={getMapZoom}
        onHandleMonitorInfo={handleMonitorInfo}
      />
      {/* 控制地图放大缩小 */}
      <section class={styles['home-zoom']}>
        <ElCard class="zoom-number-card">{state.mapZoom}</ElCard>
        <ElCard class="zoom-option-card">
          <ElSpace direction="vertical" spacer={<ElDivider />}>
            <ElLink
              underline={false}
              icon={Plus}
              disabled={state.mapZoom === 20}
              onClick={() => handleClickChangeMapZoom('+')}
            />
            <ElLink
              underline={false}
              icon={Minus}
              disabled={state.mapZoom === 5}
              onClick={() => handleClickChangeMapZoom('-')}
            />
          </ElSpace>
        </ElCard>
      </section>
      {/* 设备列表 */}
      <HomeTree class={styles['home-box-tree']} onHandleNodeClick={handleNodeClick} />
      {/* 设备统计 */}
      <StatusAccounting onDeviceNum={onDeviceNum} />
      {/* 设备列表 */}
      {state.deviceShow && (
        <DeviceList
          status={state.deviceStatus}
          show={state.deviceShow}
          cancel={onDeviceCancel}
          onRunStatusValue={onRunStatusValue}
        />
      )}
      {/* 设备故障类别 */}
      {state.faultListShow && (
        <DeviceFaultList
          deviceId={state.deviceId}
          show={state.faultListShow}
          cancel={onDeviceFaultCancel}
        />
      )}
      {/* 设备详情 */}
      {state.infoVisible && (
        <DeviceInfo
          deviceId={state.deviceId}
          close={() => {
            state.infoVisible = false
          }}
          onMarkerLayer={onMarkerLayer}
        />
      )}
    </section>
  )
})
